<template>
	<view class="space-between commodity" :style="{padding:type=='car'?'15rpx 0rpx 15rpx':'15rpx 20rpx',width:width+'rpx'}">
		<view class="left_commodity" @click="ViewDetails(shopAll.id)">
			<image :src="shopAll.image" mode=""></image>
		</view>
		<view class="right_commodity" :style="{width:type=='car'?'72%':'68%'}">
			<view @click="ViewDetails(shopAll.id)" class="title">{{shopAll.name}}</view>
			<view @click="ViewDetails(shopAll.id)" class="text">{{shopAll.subtitle}}</view>
			<view class="space-between Delivery" @click="ViewDetails(shopAll.id)"><text :style="{maxWidth:show?'95%':'60%'}">{{shopAll.dispatch_type}}</text>
			<text v-if="type!='car'">距离{{shopAll.distance}}</text></view>
			<view class="number">
				<view class="payfor">
					<text>￥</text><text>{{shopAll.price}}</text><text style="text-decoration: line-through;">￥{{shopAll.oprice}}</text>
				</view>
				<view v-if="show" class="flex-end Addition">
					<view @click="reduce(shopAll.id,shopAll.goods_nums)">
						<text></text>
					</view>
					<view>
						<text>{{shopAll.goods_nums}}</text>
					</view>
					<view @click="add(shopAll.id,shopAll.goods_nums)">
						<uni-icons type="plusempty" size="16" color="#333" ></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { showToast,errorToast, successToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	const props = defineProps({
	  type: { type: String },
	  shopAll: { type: Object },
	  show:{type:Boolean},
	  datas:{type:String},
	  width:{type:String},
	});
	function ViewDetails(num){
		const id=props.datas=='car'?props.shopAll.goods_id:num
		uni.navigateTo({
			url: '/pages/shopp/shopDetail?id='+id+'&storeId='+props.shopAll.store_id
		});
	}
	const emits = defineEmits(['ModifyCart']);
	/**
	 * @param {Object} id 商品id
	 * @param {Object} num 商品数量
	 * 减少商品数量
	 */
	function reduce(id,num){
		if(num=='1'){
			showToast('该宝贝数量不能再减少了呦~')
			return
		}
		const payload = {
			   id:Number(id),
		};
		toPublish('store/jianCartNums', payload, (obj: any) => {
		  const { code,msg } = obj;
			  if(code===1){
				  successToast(msg)
				  const pream={
					  id,
					  shopID:props.shopAll.store_id,
					  num:num,
					  type:'reduce'
				  }
				  emits('ModifyCart',pream)
			  }else{
				  errorToast(msg)
			  }
		});
	}
	/**
	 * @param {Object} id 商品id
	 * 增加商品数量
	 */
	function add(id,num){
		const payload = {
			  id:Number(id),
		};
		toPublish('store/jiaCartNums', payload, (obj: any) => {
		  const { code,msg } = obj;
			  if(code===1){
				  successToast(msg)
				  const pream={
					  id,
					  shopID:props.shopAll.store_id,
					  num:num,
					  type:'add'
				  }
				  emits('ModifyCart',pream)
			  }else{
				  errorToast(msg)
			  }
		});
	}
</script>

<style scoped lang="less">
	@import url('../groupBenefits/less/miniShop.less');
	.Addition{
		width: 50%;
		view{
			width: 60rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		view:nth-of-type(1){
			text{
				display: inline-block;
				width: 20rpx;
				height: 2rpx;
				background-color: #333;
			}
		}
		view:nth-of-type(2){
			width: 80rpx;
			text{
				width: 80rpx;
				text-align: center;
				padding: 3rpx 10rpx;
				box-sizing: border-box;
				background-color: rgba(65,163,255,.2);
				color: #333333;
				border-radius: 5px;
			}
			
		}
		view:nth-of-type(3){
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>
<style>
	.number>>>.uni-numbox-btns{
		background-color: transparent !important;
		background: transparent !important;
	}
</style>